<div style="padding: 16px;">

            <!-- 内容主体区域  面包屑-->
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>车辆管理</cite></a>
              <a><cite>车辆保险</cite></a>
            </span>

            <!-- 水平线 -->
            <hr class="layui-bg-blue">

            <!-- 搜索条件 -->
            <fieldset class="layui-elem-field">
                <legend>筛选条件</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">车牌号码</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search_username" placeholder="请输入车牌号码" class="layui-input">
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                            <button class="layui-btn layui-btn-radius layui-btn-success" id="insertData">新增车牌保险
                            </button>
                        </div>
                    </div>
                </div>
            </fieldset>

            <table class="layui-hide" id="test" lay-filter="test"></table>
            <script type="text/html" id="toolbarDemo">
                <!--                <div class="layui-btn-container">-->
                <!--                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">统计选中数目</button>
                <!--                    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
                <!--                </div>-->
            </script>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <script type="text/html" id="insert_form">
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">车牌号码</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_car_number" class="layui-input" placeholder="请输入车牌号码">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">保险公司</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_insurance_company" class="layui-input"
                                   placeholder="请输入保险公司">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label" style="width: 160px">商品险保单号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_insurance_number" class="layui-input"
                                   placeholder="请输入商品险保单号">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">商品险</label>
                        <div class="layui-inline" id="insert_insurance_time">
                            <div class="layui-input-inline" style="width: 130px">
                                <input type="text" autocomplete="off" id="time_1_l" class="layui-input" placeholder="开始日期">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 130px">
                                <input type="text" autocomplete="off" id="time_1_r" class="layui-input" placeholder="结束日期">
                            </div>
                        </div>
<!--                        <div class="layui-input-inline">-->
<!--                            <input type="text" id="insert_insurance_time" class="layui-input"-->
<!--                                   placeholder="请输入商品险起始日期" autocomplete="off">-->
<!--                        </div>-->
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label" style="width: 160px">交强险保单号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_strong_insurance_number" class="layui-input"
                                   placeholder="请输入交强险保单号">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">交强险</label>
                        <div class="layui-inline" id="insert_strong_insurance_number_time">
                            <div class="layui-input-inline" style="width: 130px">
                                <input type="text" autocomplete="off" id="time_2_l" class="layui-input" placeholder="开始日期">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 130px">
                                <input type="text" autocomplete="off" id="time_2_r" class="layui-input" placeholder="结束日期">
                            </div>
                        </div>
<!--                        <div class="layui-input-inline">-->
<!--                            <input type="text" autocomplete="off"-->
<!--                                   id="insert_strong_insurance_number_time" class="layui-input"-->
<!--                                   placeholder="请输入交强险起始日期">-->
<!--                            &lt;!&ndash;                            <input type="text" id="insert_strong_insurance_number_time" class="layui-input"&ndash;&gt;-->
<!--                            &lt;!&ndash;                                   placeholder="请输入交强险起始日期" autocomplete="off">&ndash;&gt;-->
<!--                        </div>-->
                    </div>

                </div>
            </script>

        </div>

<script>
    function flushTable() {
        tableflush()
    }

    $("#searchVal").click(function () {
        let search_username = $("#search_username").val();
        tableflush(search_username);
    });

    $("#iReset").click(function () {
        $("#search_username").val('');
        tableflush();
    });

    $("#insertData").click(function () {
        layer.open({     // 弹出框处理  模态框
            type: 1               // 模态框
            , title: '编辑车牌保险' //不显示标题栏
            , closeBtn: false
            , area: ['500px', '500px']  // 宽和高
            , shade: 0.5
            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
            , btn: ['保存', '取消']
            , btnAlign: 'c'
            , moveType: 1 //拖拽模式，0或者1
            , content: $('#insert_form').html()         // 引入自定义表单
            , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                // layer.msg("新增按钮执行");
                let carNumber = $("#insert_car_number").val();
                let insuranceCompany = $("#insert_insurance_company").val();
                let insuranceNumber = $("#insert_insurance_number").val();
                let insuranceTime = $("#time_1_l").val() + '至' + $("#time_1_r").val();
                let strongInsuranceNumber = $("#insert_strong_insurance_number").val();
                let strongInsuranceNumberTime = $("#time_2_l").val() + '至' + $("#time_2_r").val();
                // layer.msg("username=" + username + "  password=" + password);
                $.ajax({
                    url: "/carInsurance",           // 请求路径
                    type: "post",                  // 请求的方式，不区分大小写
                    cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({
                        carNumber: carNumber,
                        insuranceCompany: insuranceCompany,
                        insuranceNumber: insuranceNumber,
                        insuranceTime: insuranceTime,
                        strongInsuranceNumber: strongInsuranceNumber,
                        strongInsuranceNumberTime: strongInsuranceNumberTime
                    }),
                    datatype: "json",        // 返回类型，text文本、html页面、json数据
                    success: function (response) {
                        console.log("返回: " + response);
                        if (response.code === 0) {
                            layer.msg('操作成功', {icon: 1});
                            layer.close(index);                         // 关闭当前窗口
                            flushTable()
                        } else {
                            layer.msg("操作失败！", {icon: 2});
                        }
                    },
                    error: function (response) {
                        console.log("出错返回: " + response);
                        layer.msg("操作失败！", {icon: 2});
                    }
                });
            }
            , success: function (layero) {
                var laydate = layui.laydate;

                // 日期范围 - 左右面板联动选择模式
                laydate.render({
                    elem: '#insert_strong_insurance_number_time',
                    range: ['#time_2_l', '#time_2_r'],
                    rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
                });

                laydate.render({
                    elem: '#insert_insurance_time',
                    range: ['#time_1_l', '#time_1_r'],
                    rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
                });

            }
        });
    });

    function tableflush(search_username) {
        let param = {};
        if (search_username === undefined || search_username === null)
            search_username = '';
        param.carNumber = search_username;              // {name:''}

        layui.use(function () {
            var table = layui.table;
            var laydate = layui.laydate;

            table.render({
                elem: '#test'
                , url: '/carInsurance'
                , where: param
                , height: 'full-300'
                , toolbar: '#toolbarDemo'                          //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports']
                , title: '用户数据表'
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'id', title: 'ID'}
                    , {field: 'carNumber', title: '车牌号码'}
                    , {field: 'insuranceCompany', title: '保险公司'}
                    , {field: 'insuranceNumber', title: '商业险保单号'}
                    , {field: 'insuranceTime', title: '商业险起始日期'}
                    , {field: 'strongInsuranceNumber', title: '交强险保单号'}
                    , {field: 'strongInsuranceNumberTime', title: '交强险起始日期'}
                    // ,{title:'密码', templet: function(res){
                    //         return '<em>'+ res.password +'</em>'
                    //     }}
                    , {title: '操作', toolbar: '#barDemo'}
                ]]
                , page: true
                , limits: [5, 10, 15, 20]
            });

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                }
                ;
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('确定删除该行吗？', function (index) {

                        $.ajax({
                            url: "/carInsurance/" + data.id,           // 请求路径
                            type: "delete",                  // 请求的方式，不区分大小写
                            cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                            contentType: "application/json;charset=utf-8",
                            data: {},
                            datatype: "json",        // 返回类型，text文本、html页面、json数据
                            success: function (response) {
                                console.log("返回: " + response);
                                if (response.code === 0) {
                                    layer.msg('操作成功', {icon: 1});   // 关闭当前窗口
                                    obj.del();
                                } else {
                                    layer.msg("操作失败！", {icon: 2});
                                }
                            },
                            error: function (response) {
                                console.log("出错返回: " + response);
                                layer.msg("操作失败！", {icon: 2});
                            }
                        });

                    });
                } else if (obj.event === 'edit') {
                    layer.open({     // 弹出框处理  模态框
                        type: 1               // 模态框
                        , title: '编辑用户' //不显示标题栏
                        , closeBtn: false
                        , area: ['500px', '500px']  // 宽和高
                        , shade: 0.5
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        , btn: ['保存', '取消']
                        , btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: $('#insert_form').html()         // 引入自定义表单
                        , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                            // layer.msg("新增按钮执行");
                            let id = data.id;
                            let carNumber = $("#insert_car_number").val();
                            let insuranceCompany = $("#insert_insurance_company").val();
                            let insuranceNumber = $("#insert_insurance_number").val();
                            let insuranceTime = $("#time_1_l").val() + '至' + $("#time_1_r").val();
                            let strongInsuranceNumber = $("#insert_strong_insurance_number").val();
                            let strongInsuranceNumberTime = $("#time_2_l").val() + '至' + $("#time_2_r").val();
                            // layer.msg("username=" + username + "  password=" + password);
                            $.ajax({
                                url: "/carInsurance",           // 请求路径
                                type: "put",                  // 请求的方式，不区分大小写
                                cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                contentType: "application/json;charset=utf-8",
                                data: JSON.stringify({
                                    id: id,
                                    carNumber: carNumber,
                                    insuranceCompany: insuranceCompany,
                                    insuranceNumber: insuranceNumber,
                                    insuranceTime: insuranceTime,
                                    strongInsuranceNumber: strongInsuranceNumber,
                                    strongInsuranceNumberTime: strongInsuranceNumberTime
                                }),
                                datatype: "json",        // 返回类型，text文本、html页面、json数据
                                success: function (response) {
                                    console.log("返回: " + response);
                                    if (response.code === 0) {
                                        layer.msg('操作成功', {icon: 1});
                                        layer.close(index);                         // 关闭当前窗口
                                        flushTable();
                                    } else {
                                        layer.msg("操作失败！", {icon: 2});
                                    }
                                },
                                error: function (response) {
                                    console.log("出错返回: " + response);
                                    layer.msg("操作失败！", {icon: 2});
                                }
                            });
                        }
                        , success: function (layero) {
                            var laydate = layui.laydate;

                            // 日期范围 - 左右面板联动选择模式
                            laydate.render({
                                elem: '#insert_strong_insurance_number_time',
                                range: ['#time_2_l', '#time_2_r'],
                                rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
                            });

                            laydate.render({
                                elem: '#insert_insurance_time',
                                range: ['#time_1_l', '#time_1_r'],
                                rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
                            });


                            // 获取当前行的数据
                            let id = data.id;
                            let carNumber = data.carNumber
                            let insuranceCompany = data.insuranceCompany
                            let insuranceNumber = data.insuranceNumber
                            let insuranceTime = data.insuranceTime
                            let strongInsuranceNumber = data.strongInsuranceNumber
                            let strongInsuranceNumberTime = data.strongInsuranceNumberTime

                            let parts1 = insuranceTime.split('至');

                            let parts2 = strongInsuranceNumberTime.split('至');

                            // 填充表单字段
                            $("#insert_car_number").val(carNumber);
                            $("#insert_insurance_company").val(insuranceCompany);
                            $("#insert_insurance_number").val(insuranceNumber);
                            $("#time_1_l").val(parts1[0].trim());
                            $("#time_1_r").val(parts1[1].trim());
                            $("#insert_strong_insurance_number").val(strongInsuranceNumber);
                            $("#time_2_l").val(parts2[0].trim());
                            $("#time_2_r").val(parts2[1].trim());


                            layui.form.render();
                        }
                    });
                } else if (obj.event === 'new') {
                    layer.msg('自定义按钮触发 data=' + JSON.stringify(data));
                }
            });

        });
    }

    tableflush();
</script>